<template>
	<view class="content">
		<view class="wrap">
			<u-swiper :list="list"></u-swiper>
		</view>
		<!-- 九宫格 -->
		<u-grid :col="4">
			<u-grid-item>
				<u-icon name="photo" :size="46"></u-icon>
				<view class="grid-text">装修报价</view>
			</u-grid-item>
			<u-grid-item>
				<u-icon name="photo" :size="46"></u-icon>
				<view class="grid-text">设计师</view>
			</u-grid-item>
			<u-grid-item>
				<u-icon name="lock" :size="46"></u-icon>
				<view class="grid-text">设计案例</view>
			</u-grid-item>
			<u-grid-item>
				<u-icon name="hourglass" :size="46"></u-icon>
				<view class="grid-text">关于总裁</view>
			</u-grid-item>
			<u-grid-item>
				<u-icon name="photo" :size="46"></u-icon>
				<view class="grid-text">全案体系</view>
			</u-grid-item>
			<u-grid-item>
				<u-icon name="photo" :size="46"></u-icon>
				<view class="grid-text">良心工程</view>
			</u-grid-item>
			<u-grid-item>
				<u-icon name="photo" :size="46"></u-icon>
				<view class="grid-text">极致环保</view>
			</u-grid-item>
			<u-grid-item>
				<u-icon name="photo" :size="46"></u-icon>
				<view class="grid-text">客户服务</view>
			</u-grid-item>
		</u-grid>
		<!-- 设计案例 -->
		<view class="devise">
			<titlle title1="设计案例" title2="DESIGN WORKS"></titlle>
			<view class="devise-img">
				<image src="../../static/R-C.png"></image>
			</view>
			<textt text1="蠡湖一号" text2="400平方米" text3="现代简约"></textt>
			<view class="devise-img">
				<image src="../../static/R-C.png"></image>
			</view>
			<textt text1="高尔夫别墅" text2="400平方米" text3="现代简约"></textt>
		</view>
		<line1></line1>
		<!-- 设计师推荐 -->
		<titlle title1="设计师推荐" title2="RECOMMENDED DESICNER"></titlle>
		<view class="designer">
			<view class="director-per" v-for="(item,index) in director" :key="index">
				<image :src="item.image" />
				<view class="designer-text1">{{item.text1}}</view>
				<view class="designer-text2">{{item.text2}}</view>
			</view>
		</view>
		<line1></line1>
		<!-- 良心工艺 -->
		<titlle title1="良心工艺" title2="CONSCIENCE CRAFT"></titlle>
		<view class="craft">
			<view class="craft-left">
				<image src="../../static/gongy.png"></image>
				<view class="left-text">水电工艺</view>
			</view>
			<view class="craft-right">
				<view class="right-word" v-for="(item,index) in craft" :key="index">
					<image :src="item.image"></image>
					<view>{{item.text}}</view>
				</view>
			</view>
		</view>
		<line1></line1>
		<!-- 业主故事 -->
		<titlle title1="业主故事" title2="OWNER`S STORY"></titlle>
		<view class="tale">
			<view class="tale-word" v-for="(item,index) in tale" :key="index">
				<image :src="item.image" />
				<view>{{item.text}}</view>
			</view>
		</view>
		<line1></line1>
		<!-- 大业荣誉 -->
		<titlle title1="大业荣誉" title2="HONOR"></titlle>
		<view class="king">
			<image src=""></image>
		</view>
		<textt text1="硕果累累" text2="初心不忘 以形践言"></textt>
		<!-- 大业美家 -->
		<view class="meijia">
			<titlle title1="大业美家" title2="ABOUT US"></titlle>
			<view class="family">
				<view class="family1">
					<image src="../../static/yezhu.png" />
					<view class="family1-word">
						<view><span>9</span>年专注</view>
						做别墅大宅设计
					</view>
				</view>
				<view class="family1">
					<image src="../../static/yezhu.png" />
					<view class="family1-word">
						<view>布局<span>12</span>座</view>
						核心城市
					</view>
				</view>
				<view class="family1">
					<image src="../../static/yezhu.png" />
					<view class="family1-word">
						<view><span>12</span>家</view>
						直营分公司
					</view>
				</view>
				<view class="family1">
					<image src="../../static/yezhu.png" />
					<view class="family1-word">
						<view><span>8500</span>个家庭</view>
						的一致选择
					</view>
				</view>
			</view>
		</view>
		<!-- 全过程服务体系 -->
		<view class="national">
			<view class="national-line"></view>
			<view class="national-word">
				<image src="../../static/督导考核.png" />
				<view class="word-size">
					<view class="word-blod">service</view>
					全过程服务体系
				</view>
			</view>
			<view class="family-gid">
				<u-grid :col="3">
					<u-grid-item>
						<u-icon name="photo" :size="46"></u-icon>
						<view class="grid-text">客服管家</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="lock" :size="46"></u-icon>
						<view class="grid-text">微信服务群</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="hourglass" :size="46"></u-icon>
						<view class="grid-text">总裁办回访</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="photo" :size="46"></u-icon>
						<view class="grid-text">总经理每周巡检</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="lock" :size="46"></u-icon>
						<view class="grid-text">感恩行&美家会</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="hourglass" :size="46"></u-icon>
						<view class="grid-text">终身维修</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- 预约装修 -->
		<booking></booking>
		<foot1></foot1>
	</view>
</template>

<script>
	import titlle from "../../componet/title/title.vue"
	import textt from "../../componet/text/text.vue"
	import line1 from "../../componet/line/line.vue"
	import booking from "../../componet/book/book.vue"
	import foot1 from "../../componet/foot/foot.vue"
	export default {
		components: {
			titlle,
			textt,
			line1,
			booking,
			foot1
		},
		data() {
			return {
				// 轮播图
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				// 设计师
				director: [{
						id: 1,
						image: "../../static/wang.png",
						text1: "王艺哲",
						text2: "郑州分公司设计总监"
					},
					{
						id: 2,
						image: "../../static/wang.png",
						text1: "张猛",
						text2: "沈阳分公司设计总监"
					},
					{
						id: 3,
						image: "../../static/wang.png",
						text1: "艾武",
						text2: "北京分公司设计总监"
					}
				],
				//良心工艺
				craft: [{
						id: 1,
						image: "../../static/gongy.png",
						text: "木工工艺",
					},
					{
						id: 2,
						image: "../../static/gongy.png",
						text: "瓦工工艺",
					},
					{
						id: 3,
						image: "../../static/gongy.png",
						text: "油工工艺",
					},
					{
						id: 4,
						image: "../../static/gongy.png",
						text: "文明施工",
					}
				],
				// 业主故事
				tale: [{
						image: "../../static/yezhu.png",
						text: "半山壹号 | 张女士"
					},
					{
						image: "../../static/yezhu.png",
						text: "首开琅樾 | 白女士"
					}
				],
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	//轮播图
	//九宫格
	.grid-text {
		font-size: 20rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	//设计案例
	.devise-img {
		width: 95%;
		margin: auto;
		margin-top: 20rpx;
	}

	.devise-img image {
		width: 100%;
		height: 400rpx;
	}

	// 设计师推荐
	.designer {
		width: 95%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		background-color: #EFEFEF;
	}

	.designer image {
		width: 95%;
		height: 270rpx;
	}

	.designer-text1 {
		font-size: 27rpx;
		color: #5C5C5C;
		text-align: center;
	}

	.designer-text2 {
		font-size: 25rpx;
		color: #C0B7B5;
	}

	// 良心工艺
	.craft {
		width: 95%;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.craft-left {
		width: 48%;
		position: relative;
	}

	.left-text {
		line-height: 45rpx;
		width: 100%;
		font-size: 27rpx;
		color: white;
		background-color: rgba(0, 0, 0, 0.3);
		position: absolute;
		top: 0;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.craft-left image {
		width: 100%;
	}

	.craft-right {
		width: 48%;
		display: flex;
		flex-wrap: wrap;
	}

	.right-word {
		width: 50%;
		position: relative;
	}

	.right-word image {
		width: 97%;
		height: 237rpx;
	}

	.right-word view {
		line-height: 45rpx;
		width: 100%;
		font-size: 27rpx;
		color: white;
		background-color: rgba(0, 0, 0, 0.3);
		position: absolute;
		top: 0;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	//业主故事
	.tale {
		width: 95%;
		margin: auto;
		display: flex;
		justify-content: space-between;
	}

	.tale-word {
		width: 49%;
	}

	.tale-word image {
		width: 100%;
		height: 250rpx;
	}

	.tale-word view {

		background-color: rgba(0, 0, 0, 0.5);
		color: #EFEFEF;
		margin-top: -50rpx;
		padding-left: 15rpx;
	}

	// 大业荣誉
	.king {
		width: 95%;
		margin: auto;
	}

	.king image {
		width: 100%;
		height: 300rpx;
	}

	// 大业美家
	.meijia {
		margin-top: 80rpx;
	}

	.family {
		width: 95%;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.family1 {
		width: 48%;
		display: flex;
		position: relative;
		margin-bottom: 20rpx;
		box-shadow: 1px 1px rgb(196, 186, 186);
	}

	.family1 image {
		width: 45%;
		height: 150rpx;
	}

	.family1-word {
		position: absolute;
		left: 165rpx;
		font-size: 23rpx;
		line-height: 70rpx;
	}

	.family1-word view {
		font-weight: bold;
		font-size: 20rpx;
	}

	.family1-word span {
		font-size: 40rpx;
		border-bottom: 1px solid black;
	}

	// 全过程服务体系
	.national {
		width: 95%;
		margin: auto;
		background-color: #EFEFEF;
		margin-top: 60rpx;
		margin-bottom: 100rpx;
	}

	.national-word {
		text-align: center;
		width: 40%;
		margin: auto;
		background-color: #EFEFEF;
		display: flex;
		justify-content: space-between;
	}

	.national-word image {
		width: 75rpx;
		height: 70rpx;
	}

	.national-word .word-blod {
		font-weight: bold;
		font-size: 35rpx;
		padding-right: 70rpx;
	}

	.national-word .word-size {
		font-size: 27rpx;
	}

	.national-line {
		border-bottom: 1px solid #CCCCCC;
		height: 100rpx;
		width: 95%;
		margin: auto;
		margin-bottom: -57rpx;
	}

	.grid-text {
		font-size: 22rpx;
		font-weight: bold;
		margin-top: 4rpx;
		color: $u-type-info;
	}
	.grid-item{
		bg-color:#EFEFEF;
	}
	
</style>
